<template>
    <div class="user">

        <el-dropdown @command="handleCommand">
            <div class="user-wrap">
                <div class="avatar-wrap">
                    <img v-lazy="require('@/assets/img/logo.png')" />
                </div>
                <div class="name-wrap">
                    <span>Admin</span>
                </div>
                <!-- <span class="el-dropdown-link">
                    <el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span> -->
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="home">回到主页</el-dropdown-item>
                    <el-dropdown-item command="exit" divided>
                        <el-text class="mx-1" type="danger">退出</el-text>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

const router = useRouter();
const store = useStore();
const handleCommand = (command: string | number | object) => {
    if (command === 'home') {
        router.push('/home');
    } else if (command === 'exit') {
        store.commit('permission/_onLogout');
        router.push('/login');
       
    }
}
</script>
<style scoped lang="less">
.user {
    display: flex;

    .user-wrap {
        outline: unset;
    }

    .example-showcase .el-dropdown-link {
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
    }
}
</style>
